<template>
  <div v-if="bol">
    <!-- 回复弹层 -->
    <van-popup :value="isShow" position="right" @close="initCom">
      <!-- 头 -->
      <van-nav-bar
        :title="localCom.reply_count + '条回复'"
        @click-left="closePop"
        left-arrow
      ></van-nav-bar>
      <div class="reply-wrapper list">
        <!-- 列表 -->
        <!-- {{ localCom }} -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getComm"
        >
          <div
            class="item van-hairline--bottom"
            v-for="i in commList"
            :key="i.com_id"
          >
            <van-image round width="10vw" height="10vw" :src="i.aut_photo" />
            <div class="info">
              <p>
                <span class="name">{{ i.aut_name }}</span>
                <span class="zan"
                  >{{ i.like_count }} <geek-icon name="like2"
                /></span>
              </p>
              <p class="cont">{{ i.content }}</p>
              <p>
                <span class="time" style="margin-left:0">{{
                  i.pubdate | filterTimeGlobal
                }}</span>
              </p>
            </div>
          </div>
        </van-list>
      </div>
      <!-- 底 -->
      <div class="footer van-hairline--top" style="position:static">
        <div class="input big" @click="show = true">
          <i class="van-icon van-icon-edit"></i>
        </div>
        <div class="btn">
          <geek-icon name="collect"></geek-icon>
          <p>收藏</p>
        </div>
        <div class="btn">
          <geek-icon name="share"></geek-icon>
          <p>分享</p>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="show" position="bottom" v-if="bol2" @close="closeEvent">
      <van-nav-bar
        :title="localCom === '' ? '发表评论' : '评论回复'"
        left-arrow
        @click-left="closeInput"
      >
        <template #right>
          <div style="color:#f40" @click="publish">
            发表
          </div>
        </template>
      </van-nav-bar>
      <van-form ref="form">
        <van-field
          v-model="text"
          :rules="rules"
          rows="3"
          autosize
          type="textarea"
          maxlength="100"
          placeholder="请输入评论"
          show-word-limit
        />
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import { commentsPost, comments } from '@/api/article.js'
export default {
  name: '',
  props: {
    isShow: { type: Boolean, default: false },
    localCom: { type: [String, Object], default: '' },
    commentList: { type: Array, default: () => [] },
    info: { type: Object, default: () => ({}) }
  },
  model: {
    prop: 'isShow',
    event: 'closePop'
  },
  data () {
    return {
      text: '',
      show: false,
      bol: true,
      bol2: true,
      loading: false,
      finished: false,
      offset: null,
      commList: [],

      // 回复业务需要的数据
      params: {
        type: 'c',
        source: '',
        offset: null,
        limit: 10
      },
      rules: [{ required: true, trigger: 'onChange' }]
    }
  },

  methods: {
    initCom () {
      this.loading = false
      this.finished = false
      this.params.offset = null
      this.commList = []
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    closePop () {
      this.$emit('closePop', false)
    },
    async getComm () {
      const res = await comments({
        ...this.params,
        source: this.localCom.com_id
      })
      console.log('res', res)
      this.loading = false
      if (res.last_id === res.end_id) {
        this.finished = true
      } else {
        this.params.offset = res.data.last_id
      }
      this.commList.push(...res.data.results)
    },
    closeInput () {
      this.show = false
    },
    async publish () {
      console.log('lo', this.localCom)
      await this.$refs.form.validate()

      if (this.localCom !== '') {
        const res = await commentsPost({
          target: this.localCom.com_id,
          content: this.text,
          art_id: this.$route.params.id
        })
        // console.log(res)
        this.commList.unshift(res.data.new_obj)
        this.localCom.reply_count++
      } else {
        await this.$refs.form.validate()
        const res = await commentsPost({
          target: this.$route.params.id,
          content: this.text
        })
        this.commentList.unshift(res.data.new_obj)
        this.info.comm_count++
        console.log(res)
      }
      this.show = false
    },
    closeEvent () {
      this.text = ''
      this.bol2 = false
      this.$nextTick(() => {
        this.bol2 = true
      })
    }
  },
  async created () {
    // this.getComm()
  }
}
</script>
<style scoped lang="less">
.van-popup {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.reply-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
::v-deep .van-nav-bar__text {
  color: @geek-color;
}
::v-deep .van-field__control {
  background: @geek-gray-color;
  padding: 5px 10px;
  margin-bottom: 5px;
  border-radius: 4px;
}
</style>
